<template>
    <header class="component-box"   style="height: 28px;background-color:#921C1C">


        <div class="center-container">
            <ul class="nav">
                <!-- v-for必须绑定key，提高diff算法的渲染效率 -->
                <li v-for="item in listData" :key="item.text">
                    <a :href="item.href" :title="item.text">{{ item.text }}</a>
                </li>
            </ul>
        </div>

    </header>

    
</template>
//顶部的导航条



<script setup lang="ts">

const listData = [
    {
        text: "单独招生报名入口",
        href: "https://ddzs.scvtc.edu.cn/"
    },
    {
        text: "融合门户",
        href: "https://ehall.scvtc.edu.cn/"
    },
    {
        text: "OA系统",
        href: "https://oa.scvtc.edu.cn/seeyon/index.jsp"
    },
    {
        text: "教务在线",
        href: "https://jwc.scvtc.edu.cn/"
    },
    {
        text: "站群系统",
        href: "https://zqgl.scvtc.edu.cn/system/login.jsp"
    },
    {
        text: "书记校长信箱",
        href: "https://www.scvtc.edu.cn/info/1212/19773.htm"
    }];
</script>

<style lang="scss" scoped>

.component-box {

    .center-container {
        display: flex;
        flex-direction: row-reverse;

        .nav {
            display: flex;

            li {
                padding: 5px 0px;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.6);

                // & 表示父级
                &:hover {
                    color: #fff;
                }

                a {
                    padding: 0px 20px;
                }

                &:nth-child(n + 2)>a {
                    border-left: 1px solid rgba(255, 255, 255, 0.6)
                }
            }
        }
    }
    
}
</style>